<template>
    <div>
        <!-- 搜索框 -->
        <el-row :gutter="30">
            <el-col :span="5">
                <el-input placeholder="请输入仓库名" v-model="searchItem.a" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="请输入仓库位置" v-model="searchItem.b" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <!-- 搜索按钮 -->
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" size="small" @click="searchMessage()">搜索</el-button>
            </el-col>
            <!-- 重置搜索条件按钮 -->
            <el-col :span="2">
                <el-button type="warning" icon="el-icon-refresh-right" size="small"
                    @click="resetSearch()">重置</el-button>
            </el-col>
        </el-row>
        <!-- 增删改查按钮 -->
        <el-col :span="24">
            <el-button @click="setCurrent()" size="small" type="warning">取消选择</el-button>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogVisible2 = true">新增</el-button>
            <el-button type="success" icon="el-icon-edit" size="small" @click="dialogVisible = true"
                :disabled="isdisabled">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteByid(mesg.storeId)"
                :disabled="isdisabled">删除</el-button>
        </el-col>
        <!-- 仓库信息表格 -->
        <el-table ref="singleTable" :data="messages.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%" highlight-current-row @row-click="dataChange" height="370px">
            <el-table-column prop="storeId" label="id" width="120px" fixed sortable>
            </el-table-column>
            <el-table-column prop="name" label="仓库名" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="storePlace" label="仓库位置" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="maxNum" label="最大库存量" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="useNum" label="现有库存量" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="creator" label="创建者" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="mender" label="修改者" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="220px" sortable>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="220px" sortable>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[6, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="messages.length">
        </el-pagination>
        <!-- 修改信息弹出表单 -->
        <el-dialog title="信息修改" :visible.sync="dialogVisible" width="35%">
            <el-form ref="mesg" :model="mesg" label-width="80px">
                <el-form-item label="仓库名">
                    <el-input v-model="mesg.name"></el-input>
                </el-form-item>
                <el-form-item label="仓库位置">
                    <el-input v-model="mesg.storePlace"></el-input>
                </el-form-item>
                <el-form-item label="最大库存量">
                    <el-input v-model="mesg.maxNum"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateMessage(mesg)">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增信息弹出表单 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible2" width="35%">
            <el-form ref="newM" :model="newM" label-width="80px">
                <el-form-item label="仓库名">
                    <el-input v-model="newM.name"></el-input>
                </el-form-item>
                <el-form-item label="仓库位置">
                    <el-input v-model="newM.storePlace"></el-input>
                </el-form-item>
                <el-form-item label="最大库存量">
                    <el-input v-model="newM.maxNum"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="addMessage(newM)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Cookie from 'js-cookie'
    import { SelectAllStore, AddWStore, DeleteWStore, UpdateWStore } from '@/api/wStore.js'
    export default {
        inject: ['reload'],
        data() {
            return {
                searchItem: {               // 查询条件
                    "a": "",
                    "b": "",
                },
                tempData: [],               // 查询结果
                mCopy: [],           // 复制所有仓库信息（目的：减少接口调用）
                newM: {},             // 新增仓库信息
                messages: [],               // 所有仓库信息
                mesg: {},                // 修改仓库信息
                dialogVisible: false,       // 修改表单显隐
                dialogVisible2: false,  // 新增表单显隐
                isdisabled: true,       // 按钮禁用
                currentPage: 1,         // 当前页码
                total: 20,              // 总条数
                pageSize: 6             // 每页的数据条数

            }
        },
        methods: {
            // 搜索
            searchMessage() {
                // 搜索信息为空，展示所有信息
                if (this.searchItem.a === ''&&this.searchItem.b === '') {
                    this.messages = this.mCopy
                } else {
                    // 重置搜索条件
                    this.tempData = []
                    this.messages = this.mCopy
                    // 根据条件模糊查询
                    for (const item of this.messages) {
                        if ((this.searchItem.a === '' || item.name.includes(this.searchItem.a)) &&
                            (this.searchItem.b === '' || item.storePlace.includes(this.searchItem.b))) {
                            // 符合条件，加入查询结果中
                            this.tempData.push(item)
                        }
                    }
                    // 展示查询结果
                    this.messages = this.tempData
                }
            },
            // 重置查询条件
            resetSearch() {
                this.searchItem = {
                    "a": "",
                    "b": "",
                    "c": "",
                },
                    this.messages = this.mCopy
            },
            // 查询所有仓库
            getmessages() {
                SelectAllStore().then((res) => {
                    this.messages = res.data.data
                    this.mCopy = res.data.data
                })
            },
            // 删除仓库
            deleteByid(id) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 调用删除用户接口
                    DeleteWStore(id).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.isdisabled = true
                            this.reload();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            // 修改仓库信息
            updateMessage(mesg) {
                // 关闭表单
                this.dialogVisible = false
                mesg.mender = JSON.parse(Cookie.get('user')).realName
                // 调用修改信息接口
                UpdateWStore(mesg).then((res => {
                    if (res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        this.isdisabled = true
                        this.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }))
            },
            // 新增仓库
            addMessage(newM) {
                // 关闭表单
                this.dialogVisible2 = false
                let realName = JSON.parse(Cookie.get('user')).realName
                newM.mender = realName
                newM.creator = realName
                // 调用新增接口
                AddWStore(newM).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success("添加成功")
                        this.reload();
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })

            },
            // 选中一行数据，高亮显示
            dataChange(val) {
                this.isdisabled = false
                this.mesg = val;
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.isdisabled = true
                this.currentPage = val;
            },
            // 取消选择
            setCurrent(row) {
                this.isdisabled = true
                this.$refs.singleTable.setCurrentRow(row);
            },
        },
        // 加载用户信息
        mounted() {
            this.getmessages()
        }

    }
</script>
<style scoped>
    .el-col-24 {
        margin-top: 13px;
        margin-bottom: 13px;
    }
</style>